<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/main.css"/>
    <title>选择车型</title>
</head>
<body>
<div id="carinfo" style="" class="simplemodal-data">
    <h2>
        <a id="close" href="javascript:void(0);">&nbsp;</a>请选择车型
    </h2>
    <div
            style="width: 800px; height: auto; overflow: hidden; margin: 0 auto; padding-bottom: 30px;">
        <div class="car_type">
            <div class="car_type_menu">
                <ul class="c1">
                    <li><a href="javascript:void(0)">选择品牌</a></li>
                    <li><a href="javascript:void(0)">选择车系</a></li>
                    <li><a href="javascript:void(0)">选择年款</a></li>
                    <li><a href="javascript:void(0)">选择车型</a></li>
                </ul>
            </div>
            <div class="car_type_pp">
                <em>请选择：</em><a href="javascript:void(0)" class="ppxz">热门</a><a
                    href="javascript:void(0)">A</a><a href="javascript:void(0)">B</a><a
                    href="javascript:void(0)">C</a><a href="javascript:void(0)">D</a><a
                    href="javascript:void(0)">F</a><a href="javascript:void(0)">G</a><a
                    href="javascript:void(0)">H</a><a href="javascript:void(0)">J</a><a
                    href="javascript:void(0)">K</a><a href="javascript:void(0)">L</a><a
                    href="javascript:void(0)">M</a><a href="javascript:void(0)">N</a><a
                    href="javascript:void(0)">O</a><a href="javascript:void(0)">P</a><a
                    href="javascript:void(0)">Q</a><a href="javascript:void(0)">R</a><a
                    href="javascript:void(0)">S</a><a href="javascript:void(0)">T</a><a
                    href="javascript:void(0)">W</a><a href="javascript:void(0)">X</a><a
                    href="javascript:void(0)">Y</a><a href="javascript:void(0)">Z</a>
            </div>
            <div class="car_type_yxz" style="display: none;">
                <em>已选车型：</em>
                <ul>
                    <li level="2"><a href="javascript:void(0)" class="yxzxz">关闭</a><font></font></li>
                    <li level="3"><a href="javascript:void(0)" class="yxzxz">关闭</a><font></font></li>
                    <li level="4"><a href="javascript:void(0)" class="yxzxz">关闭</a><font></font></li>
                </ul>
            </div>

            <div class="car_type_list" bindlist="1" style="padding-left: 10px;">
                <ul>
                </ul>
            </div>
            <div class="car_type_cx dumascroll" bindlist="2"
                 id="dumaScrollAreaId_5"
                 style="position: relative; padding-left: 10px; display: block;">
                <div id="dumaScrollAreaId_5Area" class="dumascroll_area">
                    <dl>
                    </dl>
                </div>
            </div>

            <div class="car_type_cx" style="padding-top: 20px; padding-left: 10px; display: none;" bindlist="3">
                <dl>
                </dl>
            </div>

            <div class="car_type_cx" style="padding-top: 20px; padding-left: 10px; display: none;" bindlist="4">
                <dl>
                </dl>
            </div>
        </div>
    </div>
</div>

<div align="right" style="padding: 5px">
    <button class=" btn btn-primary" onclick="confirm()">确定</button>
</div>

<!--end-Footer-part-->
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    var pathdata = {
        brandi: 0,
        brandname: "",
        lineid: 0,
        linename: "",
        year: 0,
        yearname: "",
        modelid: 0,
        modelname: ""
    };

    var modalNum;
    var current = 0;
    tolevel(1);
    $(".car_type_pp a[class='ppxz']").each(function () {
        $(".car_type_list ul").empty();
        $(this).click(function () {
            $(".car_type_pp a[class='ppxz']").each(function () {
                $(this).removeClass("ppxz");
            });
            $(this).addClass("ppxz");
            $.ajax({
                type: "GET",
                data: {firstLetter: $(this).text()},
                url: "/carBrands/GetPopularBrands",
                dataType: "json",
                success: function (data) {
                    if (data.code == 2000) {
                        for (var i = 0; i < data.data.length; i++) {
                            $(".car_type_list ul").append("<li><a href='javascript:void(0)' value='"
                                + data.data[i].id
                                + "'><img src='" + data.data[i].icon + "' width='100' height='100' /><font>"
                                + data.data[i].name
                                + "</font></a></li>");
                        }
                        $(".car_type_list ul li a").each(
                            function () {
                                $(this).click(function () {
                                    var id = $(this).attr("value");
                                    var name = $(this).find("font").text();
                                    tolevel(2, id, name);
                                });
                            });
                    } else {
                        Ewewo
                            .Tips_Error('获取品牌不成功!');
                    }
                },
                error: function () {
                    Ewewo
                        .Tips_Error('网络错误,获取品牌不成功!');
                }
            });
        });
    });

    $(".car_type_pp a[class!='ppxz']")
        .each(
            function () {
                $(this)
                    .click(
                        function () {
                            $(".car_type_list ul").empty();
                            $(
                                ".car_type_pp a[class='ppxz']")
                                .each(
                                    function () {
                                        $(this)
                                            .removeClass(
                                                "ppxz");
                                    });
                            $(this).addClass("ppxz");
                            $
                                .ajax({
                                    type: "GET",
                                    data: {
                                        firstLetter: $(
                                            this)
                                            .text()
                                    },
                                    url: "/carBrands/GetBrandByFirstLetter",
                                    dataType: "json",
                                    success: function (data) {

                                        if (data.code == 2000) {

                                            for (var i = 0; i < data.data.length; i++) {
                                                $(
                                                    ".car_type_list ul")
                                                    .append(
                                                        "<li><a href='javascript:void(0)' value='"
                                                        + data.data[i].id
                                                        + "'><img src='" + data.data[i].icon + "' width='100' height='100' /><font>"
                                                        + data.data[i].name
                                                        + "</font></a></li>");
                                            }
                                            $(
                                                ".car_type_list ul li a")
                                                .each(
                                                    function () {
                                                        $(this).click(
                                                            function () {
                                                                    var id = $(this).attr("value");
                                                                    var name = $(this).find("font").text();
                                                                    tolevel(2, id, name);
                                                                });
                                                    });
                                        } else {
                                            Ewewo
                                                .Tips_Error('获取品牌不成功!');
                                        }
                                    },
                                    error: function () {
                                        Ewewo
                                            .Tips_Error('网络错误,获取品牌不成功!');
                                    }
                                });
                        });
            });

    function bindbrands() {
        $(".car_type_list ul").empty();
        $
            .ajax({
                type: "GET",
                url: "/carBrands/GetPopularBrands",
                dataType: "json",
                success: function (data) {
                    if (data.code == 2000) {

                        for (var i = 0; i < data.data.length; i++) {
                            $(".car_type_list ul")
                                .append(
                                    "<li><a href='javascript:void(0)' value='"
                                    + data.data[i].id
                                    + "'><img src='" + data.data[i].icon + "' width='100' height='100' /><font>"
                                    + data.data[i].name
                                    + "</font></a></li>");
                        }
                        $(".car_type_list ul li a").each(function () {
                            $(this).click(function () {
                                var id = $(this).attr("value");
                                var name = $(this).find("font").text();
                                tolevel(2, id, name);
                            });
                        });
                    } else {
                        Ewewo.Tips_Error('获取品牌不成功!');
                    }
                },
                error: function () {
                    Ewewo.Tips_Error('网络错误,获取品牌不成功!');
                }
            });
    }

    function bindlines() {
        var dl = $(".car_type div[bindlist=2] dl");
        dl.empty();
        $
            .ajax({
                type: "GET",
                data: {
                    brandId: getidbylevel(2)
                },
                url: "/carBrands/GetLinesByBrandId",
                dataType: "json",
                success: function (data) {
                    if (data.code == 2000) {

                        var html = "";
                        for (var i = 0; i < data.data.length; i++) {
                            if (i == 0) {
                                factory = data.data[i].factoryName;
                                html += "<dt>"
                                    + data.data[i].factoryName
                                    + "</dt>";
                                html += "<dd><a href='javascript:void(0)' value='"
                                    + data.data[i].lineId
                                    + "'>"
                                    + data.data[i].lineName
                                    + "</a></dd>";
                            } else {
                                if (data.data[i].factoryName == data.data[i - 1].factoryName) {
                                    html += "<dd><a href='javascript:void(0)' value='"
                                        + data.data[i].lineId
                                        + "'>"
                                        + data.data[i].lineName
                                        + "</a></dd>";
                                } else {
                                    html += "</dl><dl><dt>"
                                        + data.data[i].factoryName
                                        + "</dt>";
                                    html += "<dd><a href='javascript:void(0)' value='"
                                        + data.data[i].lineId
                                        + "'>"
                                        + data.data[i].lineName
                                        + "</a></dd>";
                                }
                            }
                        }

                        dl.html(html);
                        dl.find("dd a").each(function () {
                            $(this).click(function () {
                                var id = $(this).attr("value");
                                var name = $(this).text();
                                tolevel(3, id, name);
                            });
                        });
                    } else {
                        Ewewo.Tips_Error('获取车系不成功!');
                    }
                },
                error: function () {
                    Ewewo.Tips_Error('网络错误,获取车系不成功!');
                }
            });
    }

    function bindyears() {
        var dl = $(".car_type div[bindlist=3] dl");
        dl.empty();
        $
            .ajax({
                type: "GET",
                data: {
                    lineId: getidbylevel(3)
                },
                url: "/carBrands/GetYearsByLineId",
                dataType: "json",
                success: function (data) {
                    if (data.code == 2000) {

                        for (var i = 0; i < data.data.length; i++) {
                            dl
                                .append("<dd><a href='javascript:void(0)'  value='"
                                    + data.data[i].yearName
                                    + "'>"
                                    + data.data[i].yearName
                                    + "</a></dd>");
                        }
                        dl.find("dd a").each(function () {
                            $(this).click(function () {
                                var id = $(this).attr("value");
                                var name = $(this).text();
                                tolevel(4, id, name);
                            });
                        });
                    } else {
                        Ewewo.Tips_Error('获取年款不成功!');
                    }
                },
                error: function () {
                    Ewewo.Tips_Error('网络错误,获取年款不成功!');
                }
            });
    }

    function bindmodels() {
        var dl = $(".car_type div[bindlist=4] dl");
        dl.empty();
        $
            .ajax({
                type: "GET",
                data: {
                    lineId: getidbylevel(3),
                    year: getidbylevel(4)
                },
                url: "/carBrands/GetModelByYear",
                dataType: "json",
                success: function (data) {
                    if (data.code == 2000) {

                        for (var i = 0; i < data.data.length; i++) {
                            dl
                                .append("<dd style='width:346px;'><a href='javascript:void(0)' style='width:336px;' value='"
                                    + data.data[i].modelId
                                    + "'>"
                                    + data.data[i].modelName
                                    + "</a></dd>");
                        }

                        dl.find("dd a").each(function () {
                            $(this).click(function () {
                                var id = $(this).attr("value");
                                var name = $(this).text();
                                setmodeldata(parseInt(id), name);
                                dl.find("dd a").each(function () {
                                    $(this).removeAttr("class");
                                });
                                $(this).attr("class", "cxxz");
                            });
                        });
                    } else {
                        Ewewo.Tips_Error('获取年款不成功!');
                    }
                },
                error: function () {
                    Ewewo.Tips_Error('网络错误,获取年款不成功!');
                }
            });
    }

    function tolevel(level, id, name) {
        setheadstyle(level);
        showcontrolpanel(level);
        switch (level) {
            case 1:
                bindbrands();
                break
            case 2:
               setchoice(2, id, name);
                setpathdata(2, id, name);
               bindlines();
                break;
            case 3:
                setchoice(3, id, name);
                setpathdata(3, id, name);
                bindyears();
                break;
            case 4:
                setchoice(4, id, name);
                setpathdata(4, id, name);
                bindmodels();
                break;
        }

        $(".car_type div[bindlist]").each(function () {

            if ($(this).attr("bindlist") == level)
                $(this).show();
            else
                $(this).hide();
        });

    }

    function setheadstyle(level) {
        $(".car_type_menu>ul").attr("class", "c" + level);
    }

    function showcontrolpanel(level) {
        if (level == 1) {
            $(".car_type_pp").show();
            $(".car_type_yxz").hide();

        } else {
            $(".car_type_pp").hide();
            $(".car_type_yxz").show();
            showchoice(level);
        }
    }

    function setchoice(level, id, name) {
        $(".car_type_yxz ul li").each(function () {
            var olevel = $(this).attr("level");
            if (olevel == level) {
                var a = $(this).find("a")
                a.attr("value", id);
                $(this).find('font').text(name)
            } else if (olevel > level) {
                var a = $(this).find("a")
                a.attr("value", 0);
                $(this).find('font').text("")
            }
        });
    }

    function setmodeldata(id, name) {
        pathdata.modelid = parseInt(id);
        pathdata.modelname = name;
    }

    function bindPathData() {
        var cbrand = $("#txtbrand_" + current);
        var cline = $("#txtline_" + current);
        var cmodelyear = $("#txtmodelyear_" + current);
        var cmodel = $("#txtmodel_" + current);

        cbrand.val("");
        cline.val("");
        cmodelyear.val("");
        cmodel.val("");

        cbrand.attr("valueid", "");
        cline.attr("valueid", "");
        cmodelyear.attr("valueid", "");
        cmodel.attr("valueid", "");

        $(".car_type_yxz ul li").each(function () {

            if ($(this).css("display") != "none") {
                var level = parseInt($(this).attr("level"));
                if (level == 2) {
                    cbrand.val(pathdata.brandname);
                    cbrand.attr("valueid", pathdata.brandi)
                } else if (level == 3) {
                    cline.val(pathdata.linename);
                    cline.attr("valueid", pathdata.lineid)
                } else if (level == 4 && pathdata.year != 0) {
                    cmodelyear.val(pathdata.year);
                    cmodelyear.attr("valueid", pathdata.year)
                }
            }

        });

        if (pathdata.modelid != null && pathdata.modelid > 0) {
            cmodel.val(pathdata.modelname);
            cmodel.attr("valueid", pathdata.modelid);
        }
    }

    function setpathdata(level, id, name) {
        switch (level) {
            case 2:
                pathdata.brandi = id;
                pathdata.brandname = name;
                pathdata.lineid = 0;
                pathdata.linename = "";
                pathdata.year = 0;
                pathdata.modelid = 0;
                pathdata.modelname = "";
                break;
            case 3:
                pathdata.lineid = id;
                pathdata.linename = name;
                pathdata.year = 0;
                pathdata.modelid = 0;
                pathdata.modelname = "";
                break;
            case 4:
                pathdata.year = id;
                pathdata.modelid = 0;
                pathdata.modelname = "";
                break;

        }
    }


    function showchoice(level) {
        $(".car_type_yxz ul li").each(function () {
            if ($(this).attr("level") > level)
                $(this).hide();
            else
                $(this).show();
        });
    }

    function getidbylevel(level) {
        var li = $(".car_type_yxz ul li[level=" + level + "]")
        var a = li.find("a")
        return parseInt(a.attr("value"));
    }

    function getnamebylevel(level) {
        var li = $(".car_type_yxz ul li[level=" + level + "]")
        return li.find("font").text();
    }

    $(".car_type_yxz ul li a").each(function () {
        $(this).click(function () {
            $(this).parent().hide();
            $(this).parent().find("font").text("");
            $(this).attr("value", "0");
            var level = parseInt($(this).parent().attr("level"));
            tolevel(level - 1, getidbylevel(level - 1), getnamebylevel(level - 1));
        });
    });

    function confirm() {
        var index = parent.layer.getFrameIndex(window.name);//获取子窗口索引
        var result = pathdata.brandname + ' ' + pathdata.linename + " " + pathdata.year + " " + pathdata.modelname;
        //$("#ggghaha").html(result);
        //console.log(JSON.stringify(window));
        console.log(window.parent);
        window.parent.setData(result);
        parent.layer.close(index);
    }

    //selectcarinfo();

</script>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script type="text/javascript">

    layui.config({
        base: '/js/admin/'
    }).extend({
        ajaxExtention: 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
        $tool: 'tool'
    }).use(['$tool'], function () {
        $tool = layui.$tool;
        var queryArgs = $tool.getQueryParam();//获取查询参数
        modalNum = queryArgs['modalNum'];

    });
</script>


</body>
</html>